<!--
 * @Author: Dorange.Wang
 * @Date: 2021-03-31 16:04:51
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-30 17:06:32
 * @Description: file content
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="880px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>权限设置</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <el-tabs type="card" class="pl20 pr20" v-model="activeName">
      <el-tab-pane label="操作权限" name="first">
        <div style="max-height: 400px" class="ova">
          <el-divider content-position="left"> 主页面 </el-divider>
          <el-table
            row-key="componentId"
            :data="tableData"
            border
            style="width: 100%"
            size="mini"
            default-expand-all
          >
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <div
                  v-if="!!scope.row.name && scope.row.type !== 'table'"
                  class="ks-col"
                >
                  <el-tag
                    size="mini"
                    class="mr10"
                    v-for="(j, index) in scope.row.name.split(',')"
                    :key="index"
                  >
                    {{ j }}
                  </el-tag>
                </div>
                <b v-else>
                  {{ scope.row.name }}
                </b>
              </template>
            </el-table-column>
            <el-table-column prop="componentId" label="唯一标识">
            </el-table-column>
            <el-table-column prop="alias" label="别名">
              <template slot-scope="scope">
                <el-input
                  size="mini"
                  v-if="scope.row.type !== 'table'"
                  v-model="scope.row.alias"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否权限控制">
              <el-table-column width="120">
                <template slot="header" slot-scope="scope">
                  <el-checkbox
                    v-model="mainchecked"
                    @change="(e) => checkMainlist(e, tableData)"
                    >全选</el-checkbox
                  >
                </template>
                <template slot-scope="scope">
                  <div class="ks-col">
                    <el-checkbox
                      v-model="scope.row.checked"
                      v-if="scope.row.type !== 'table'"
                      @change="btnCheckedforMain"
                    ></el-checkbox>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>

          <div v-for="(i, index) in templates" :key="index" class="mt20">
            <div v-if="i.btnList.length > 0">
              <el-divider content-position="left">
                <span class="g6 f12">模态框名称 {{ i.name }}</span>
                <span class="dib ml20 f12">模态框标识 {{ i.key }}</span>
              </el-divider>
              <el-table
                row-key="componentId"
                :data="i.btnList"
                border
                style="width: 100%"
                size="mini"
                default-expand-all
              >
                <el-table-column prop="name" label="名称">
                  <template slot-scope="scope">
                    <div
                      v-if="!!scope.row.name && scope.row.type !== 'table'"
                      class="ks-col"
                    >
                      <el-tag
                        size="mini"
                        class="mr10"
                        v-for="(j, index) in scope.row.name.split(',')"
                        :key="index"
                      >
                        {{ j }}
                      </el-tag>
                    </div>
                    <b v-else>
                      {{ scope.row.name }}
                    </b>
                  </template>
                </el-table-column>
                <el-table-column prop="componentId" label="唯一标识">
                </el-table-column>
                <el-table-column prop="alias" label="别名">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-if="scope.row.type !== 'table'"
                      v-model="scope.row.alias"
                      placeholder="请输入内容"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="是否权限控制">
                  <el-table-column width="120">
                    <template slot="header" slot-scope="scope">
                      <el-checkbox
                        v-model="i.btnchecked"
                        @change="(e) => checkMainlist(e, i.btnList)"
                        >全选</el-checkbox
                      >
                    </template>
                    <template slot-scope="scope">
                      <div class="ks-col">
                        <el-checkbox
                          @change="btnCheckedforKey(i)"
                          v-model="scope.row.checked"
                          v-if="scope.row.type !== 'table'"
                        ></el-checkbox>
                      </div>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      templates: [],
      activeName: "first",
      showVisible: false,
      mainchecked: false,
      callback: () => {},
    };
  },
  methods: {
    transformModelTree(tree) {
      let queen = [],
        out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        let first = queen.shift();
        if (first.children) {
          queen = [].concat(first.children, queen);
        } else if (first.checked) {
          out.push(first);
        }
      }
      return out;
    },
    btnCheckedforKey(item) {
      let btnchecked = item.btnList
        .map((i) => i.children || i)
        .flat()
        .every((i) => i.checked);
      return Object.assign(item, { btnchecked });
    },
    btnCheckedforMain() {
      this.mainchecked = this.tableData
        .map((i) => i.children || i)
        .flat()
        .every((i) => i.checked);
    },
    checkMainlist(checked, btnlist) {
      btnlist.forEach((i) => {
        if (!!i.children) {
          i.children.forEach((j) => {
            j.checked = checked;
          });
        } else {
          i.checked = checked;
        }
      });
    },
    submit() {
      let auths = this.templates.map((i) => [...i.btnList]).flat();
      auths = [].concat(this.tableData, auths);
      let checkedAuth = this.transformModelTree(auths);
      this.callback(checkedAuth);
      this.showVisible = false;
    },
    openForm(arg) {
      this.tableData = arg.btnList;
      this.btnCheckedforMain();
      this.templates = arg.template.map(this.btnCheckedforKey);
      this.showVisible = true;
      this.activeName = "first";
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
  display: flex;
}
</style>
